<template>
  <div class="app-container">
    <simple-tab v-model="activeTab" @change="refreshTable" :tabs="[{label:'新注册',value:1},{label:'今日活跃',value:2},{label:'被锁定',value:3}]">
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="danger" icon="el-icon-plus">新增</el-button>
        <el-button type="warning" icon="el-icon-upload2">导出</el-button>
    </simple-tab>

    <page-table ref="table" index :fetch="getTableList" :query="queryParams">
      <el-table-column align="center" min-width="120" label="用户名" prop="col1" />
      <el-table-column align="center" min-width="180" label="用户创建时间" prop="col2" />
      <el-table-column align="center" min-width="180" label="IP地址" prop="col3" />
      <el-table-column align="center" min-width="250" label="所在区域" prop="col4" show-overflow-tooltip/>
      <el-table-column align="center" min-width="280" label="描述" prop="col5" show-overflow-tooltip/>
      <el-table-column align="center" min-width="200" label="操作" prop="col6">
        <template slot-scope="{row}">
          <el-button type="text">编辑</el-button>
          <el-button type="text" @click="deleteObj(row)">删除</el-button></template>
      </el-table-column>
    </page-table>
  </div>
</template>

<script>
import { getExamplePageList } from '@/api/document'
export default {
  data () {
    return {
      activeTab: 1,
      queryParams: {}
    }
  },
  methods: {
    getTableList (query) {
      query.status = this.activeTab
      return getExamplePageList(query)
    },
    refreshTable () {
      this.$refs.table.refresh()
    },
    deleteObj (row) {
      this.$confirm(
        `是否删除【${row.col1}】,删除角色将同时关闭角色下的用户？`,
        '删除提示',
        { type: 'warning' }
      ).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.refreshTable()
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
